<template>
    <div class="project-detail-view">
        <page-header pageTitle="项目1"></page-header>
        <div class="project-detail-view-content">
            <el-row class="content">
                <el-tabs v-model="activeMenu" type="card" tab-position="left">
                    <el-tab-pane label="项目信息" name="projectBase">
                        <!--  todo 项目信息 -->
                        <project-base class="project-base" :projectId="projectId"></project-base>
                    </el-tab-pane>
                    <el-tab-pane label="版本列表" name="projectVersion">
                        <el-button type="primary" size="mini" icon="el-icon-plus"
                                   round class="btn-add-version">添加版本</el-button>
                        <version-list/>
                    </el-tab-pane>
                    <el-tab-pane label="角色和人员" name="roleAndPerson">
                        <el-button type="primary" size="mini" icon="el-icon-plus"
                                   round class="btn-add-version"
                                   plain @click="setRole">配置角色</el-button>
                        <el-button type="primary" size="mini" icon="el-icon-plus"
                                   round class="btn-add-version"
                                   plain @click="setPerson">添加人员</el-button>
                        <project-role-person/>
                    </el-tab-pane>
                </el-tabs>
            </el-row>
        </div>


        <el-dialog
                title="配置角色"
                :visible.sync="setRoleDialogVisible"
                width="40%">
            <div class="project-role-setting-view">
            <el-transfer
                    v-model="selectedRoles"
                    :props="{key: 'id',label: 'name'}"
                    :titles="['角色', '所选角色']"
                    :data="roleData">
            </el-transfer>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="setRoleDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="setRoleDialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>


        <el-dialog
                title="添加人员"
                :visible.sync="setPersonDialogVisible"
                width="40%">
            <div class="project-role-setting-view">
                <el-form>
                <el-form-item label="角色">
                    <el-select v-model="selectedPersonsRole">
                        <el-option v-for="role in roleData"
                        :key="role.id" :label="role.name" :value="role.id"></el-option>
                    </el-select>
                </el-form-item>
                </el-form>
                <el-transfer
                        v-model="selectedPersons"
                        :props="{key: 'id',label: 'name'}"
                        :titles="['人员', '所选人员']"
                        :data="personData">
                </el-transfer>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="setPersonDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="setPersonDialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>

    </div>
</template>
<script>
    import VersionList from "../version/VersionList";
    import ProjectRolePerson from "./ProjectRolePerson";
    import ProjectBase from "./detail/ProjectBase";

    export default {
        components: {
            ProjectRolePerson,
            VersionList,
            PageHeader: () => import("@/views/common/PageHeader.vue"),
            ProjectBase
        },
        name: 'ProjectDetail',
        component: {
            VersionList: () => import('@/views/version/VersionList.vue'),
            ProjectRolePerson: () => import('@/views/project/ProjectRolePerson.vue')
        },
        data() {
            return {
                activeMenu: "projectBase",
                projectId: '',
                setRoleDialogVisible: false,
                roleData: [
                    {id: '1', name: '角色1'},
                    {id: '2', name: '角色2'},
                    {id: '3', name: '角色3'},
                    {id: '4', name: '角色4'}
                ],
                selectedRoles: [],
                setPersonDialogVisible: false,
                selectedPersonsRole: '',
                personData: [
                    {id: '1', name: '人员1'},
                    {id: '2', name: '人员2'},
                    {id: '3', name: '人员3'},
                    {id: '4', name: '人员4'}
                ],
                selectedPersons: [],
                project: {
                    id: "",
                    name: "",
                    desc: "",
                    team: "",
                    start_time: "",
                    end_time: "",
                    status: 0
                }
            }
        },
        created () {
            this.projectId = this.$route.query.projectId;
        },
        methods: {
            goBack: function() {
                this.$router.back();
            },
            setRole: function() {
                this.setRoleDialogVisible = true;
            },
            setPerson: function() {
                this.setPersonDialogVisible = true;
            }
        }
    }
</script>
<style lang="scss" scoped>
    .project-detail-view {
        width: 100%;
        height: 100%;
        overflow: hidden;

        .page-header {
            margin: 0.1rem 0.2rem;

            .page-header-content {
                font-size: 0.16rem;
            }
        }

        .project-detail-view-content {
            height: calc(100% - 24px - 0.4rem);

            .content{
                margin: auto 0.2rem;
                border-top: 1px solid #d0d0d0;

                .project-base{
                    margin: 0.4rem;
                    width: 3rem;
                }
            }
        }
    }
</style>
